<script setup>
import axios from 'axios';
import { ElDropdownItem, ElMessage, ElMessageBox } from 'element-plus'
import { ref } from 'vue';
import Edit from '@/components/Edit.vue'
// TODO:列表渲染
const tablelist = ref([])
const list = () => {
  axios.get('/list').then(res => {
    console.log(res.data)
    tablelist.value = res.data
  })

}
list()

// TODO:删除功能
const del = (id) => {
  ElMessageBox.confirm(
    '确定要删除吗?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.delete(`/del/${id}`).then((res) => {
        console.log(res)
      })
      list()
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}


// TODO:编辑功能

const enit = (row) => {
 
}



// 更新列表



</script>

<template>
  <div class="app">
    <el-table :data="tablelist" style="width: 100%">
      <el-table-column prop="id" label="序号" width="180" />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="place" label="籍贯" />
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="enit(scope.row)">编辑</el-button>
          <el-button link type="primary" size="small" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Edit/>
  </div>
</template>

<style scoped>
.app {
  width: 980px;
  margin: 100px auto 0;
}
</style>
